﻿/******************************************************************************
* File description: CustomComboBox.qml
* Function: 多选框
* Current Version: 1.0.0
 *****************************************************************************/
import QtQuick 2.0
import QtQuick.Templates 2.12

Item{

    id: root
    readonly property real dp: config.dp

    property string title: ""
    property real   box_size: 18*dp

    property color color: "#666666"
    property color font_color: color
    property color box_color: color
    property color tick_color: config.reverseStepColor(box_color)

    property bool   checked: false

    property bool   editable: true

    function getStatus(){
        return checked && editable
    }
    signal clicked()

    property bool autoChecked: true     // check是否跟随点击变化


    height: 40*dp
    width: text_title.contentWidth + box_size + (title===""?0:20*dp)

    Rectangle{
        height: box_size
        width: box_size
        x: title===""?0:3*dp
        radius: 3*dp
        anchors.verticalCenter: root.verticalCenter
        border.color: "#AAAAAA"
        Rectangle{          // 选择Rect样式
            height: box_size-0*dp
            width: box_size-0*dp
            radius: 3*dp
            x: 0*dp
            y: 0*dp
            color: box_color
            visible: checked && editable
            Text{
                text: "✔"
                color: tick_color
                anchors.centerIn: parent
                font.pixelSize: config.fontsize - 4
                opacity: 1
            }
            opacity: 0.9
        }
        Rectangle{          // 不可选时的样式
            height: box_size-0*dp
            width: box_size-0*dp
            color: "#CCC"
            opacity: 0.5
            radius: 4*dp
            visible: ! editable
        }

        MouseArea{
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked:{
                clickEvent()
            }
        }
    }

    Item{               // 文本
        height: root.height
        x: box_size + 10*dp
        width: title.length * (config.fontsize-2*dp)
        Text {
            id: text_title
            text: qsTr(title)
            font.pixelSize: config.fontsize
            color: editable ? font_color : "#AAAAAA"
            anchors.verticalCenter: parent.verticalCenter
        }MouseArea{
            height: 20*dp; width: parent.width
            x: -10*dp; y: 10*dp
            cursorShape: Qt.PointingHandCursor
            onClicked:{
                clickEvent()
            }
        }
    }

    function clickEvent(){

        root.focus = true
        if(autoChecked){
            if(editable){
                checked = ! checked
            }
        }

        root.clicked()
    }


}
